<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt" %>
<html>
<head>
    <meta charset="utf-8">
    <title>阿星影院在线售票</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="Author" content="larry"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="${base}/static/css/index/40d4116c.css">
    <link rel="stylesheet" href="${base}/static/css/index/ef9cella.css">
    <link rel="stylesheet" href="${base}/static/css/index/c339c8d8.css">
    <link rel="stylesheet" href="${base}/static/css/index/8ba7074d.css">
    <style>
        @font-face {
            font-family: stonefont;
            src: url('//vfile.meituan.net/colorstone/96b0bab5c647e4278bbb2d8a1582d6a43168.eot');
            src: url('//vfile.meituan.net/colorstone/96b0bab5c647e4278bbb2d8a1582d6a43168.eot?#iefix') format('embedded-opentype'),
            url('//vfile.meituan.net/colorstone/ee6d7f0419d85ddc3cd58762f8e47dd52080.woff') format('woff');
        }

        .stonefont {
            font-family: stonefont;
        }
    </style>
    <meta name="lx:autopv" content="off">
    <meta name="lx:appnm" content="movie">
    <meta name="lx:category" content="movie">
    <style type="text/css">
        @media print {
            .smnoprint {
                display: none
            }
        }
        .container {
            margin-top: 60px;
        }
        .active-date{
            color:#fff;
            background-color:#f03d37
        }
    </style>
</head>
<body>
<div class="header">
    <div class="header-inner">
        <img src="${base}/static/image/star.png">
        <div class="ciname-name">阿星影城</div>
        <div class="user-info">
            <div class="user-avatar has-login">
                <img src="${user.header}">
                <span class="caret"></span>
                <ul class="user-menu">
                    <li class="text">
                        <a href="${base}/ticket/user/orderInfo.page">我的订单</a>
                        <input type="hidden" name="userId" value="${user.id}">
                    </li>
                    <li class="text login-name"><a href="${base}/ticket/index/index.page">返回首页</a></li>
                    <li class="text login-name"><a href="${base}/ticket/user/userInfo.page?userId=${user.id}">个人中心</a></li>
                    <li class="text"><a href="${base}/login/logout.do" class="J-logout">退出登录</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="header-placeholder"></div>
<div class="banner">
    <div class="wrapper clearfix">
        <input type="hidden" name="filmId" value="${film.id}">
        <div class="celeInfo-left">
            <div class="avatar-shadow">
                <img class="avatar"
                     src="${film.briefPic}">
                <div class="movie-ver"></div>
            </div>
        </div>
        <div class="celeInfo-right clearfix">
            <div class="movie-brief-container">
                <h3 class="name">${film.title}</h3>
                <ul>
                    <li class="ellipsis">分类：${film.kind}</li>
                    <li class="ellipsis">时长：${film.duration}分钟</li>
                    <li class="ellipsis">主演：${film.performer}</li>
                    <li class="ellipsis">${film.publishTime}上映</li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="container" style="min-height: 100px;">
    <div class="show-list active" data-index="8" <c:if test="${flag == 2}">style="display: none;" </c:if>>
        <div class="show-date">
            <span>观影时间 :</span>
            <c:forEach items="${dateList}" var="date" varStatus="status">
                <c:if test="${status.index == 0}">
                    <span class="date-item active-date" data-index="0">${date}</span>
                </c:if>
                <c:if test="${status.index != 0}">
                    <span class="date-item" data-index="0">${date}</span>
                </c:if>
            </c:forEach>
        </div>
        <div id="scheduleDiv"></div>
        <input type="hidden" name="flag" value="${flag}">
    </div>
</div>
<div class="footer" style="visibility: visible;">
    <p class="friendly-links">
        商务合作邮箱：v@maoyan.com
        客服电话：10105335
        违法和不良信息举报电话：4006018900
        <br>
        投诉举报邮箱：tousujubao@meituan.com
        舞弊线索举报邮箱：wubijubao@maoyan.com
    </p>
    <p>江苏阿星影城有限公司</p>
</div>

<script src="${base}/assets/js/layui/layui.js"></script>

<%--时间表模版--%>
<script id="scheduleData" type="text/html">
    <div class="plist-container active">
        <table class="plist">
            <thead>
            <tr>
                <th>放映时间</th>
                <th>语言版本</th>
                <th>放映厅</th>
                <th>售价（元）</th>
                <th>选座购票</th>
            </tr>
            </thead>
            <tbody>
            {{# layui.each(d, function(index, item){ }}
            <tr class="">
                <td><span class="begin-time">{{ item.startTime }}</span><br>
                    <span class="end-time">{{ item.endTime }}散场</span>
                </td>
                <td><span class="lang">${film.dimension}D</span></td>
                <td><span class="hall">{{ item.place }}号厅</span></td>
                <td><span class="sell-price"><span class="stonefont">{{ item.price }}</span></span></td>
                <td><a href="${base}/ticket/schedule/seat.page?scheduleId={{ item.id }}" class="buy-btn normal">选座购票</a></td>
            </tr>
            {{# }); }}
            </tbody>
        </table>
    </div>
</script>
<script>
    layui.use(['jquery', 'laytpl'], function () {
        var $ = layui.jquery, laytpl = layui.laytpl;
        $(document).ready(function () {

            var flag = $("input[name=flag]").val();
            if (flag === "1"){
                //渲染场次数据
                function createSchedule(filmId, date) {
                    //base64处理参数
                    $.ajax({
                        url: 'schedule.do',
                        data: {"filmId": filmId, "date":date},
                        type: 'GET',
                        dataType: 'json',
                        async: true,
                        success: function (res) {
                            if (res.success) {
                                if (res.data.length > 0){
                                    var getTpl = scheduleData.innerHTML
                                        , view = document.getElementById('scheduleDiv');
                                    laytpl(getTpl).render(res.data, function (html) {
                                        view.innerHTML = html;
                                    });
                                }
                                else {
                                    var html = "<span>暂无场次</span>";
                                    var view = document.getElementById('scheduleDiv');
                                    view.innerHTML = html;
                                }
                            }
                        }
                    });
                }
            }

            var filmId = $("input[name=filmId]").val();
            var date = $(".date-item.active-date").text();
            console.log(date);
            createSchedule(filmId, date);
           $(document).on("click", ".date-item", function () {
               $.each($(".date-item"), function (index, value) {
                   if ($(this).hasClass("active-date")){
                       $(this).removeClass("active-date");
                   }
               });
               $(this).addClass("active-date");
                console.log($(this).text());
                date = $(this).text();
               createSchedule(filmId, date);
           });


        });
    });
</script>
</body>
</html>